import React, { Component } from 'react';
import { View, Text } from 'remax/wechat'

import CustomList from './CustomList.js';
import CustomInput from './CustomInput.js';

class Todo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [
      ]
    }

  }

  addTodo = (value) => {
    let list = this.state.list;
    list.push({
      id: list.length + 1,
      name: value,
      finished: false
    })
    this.setState({
      list
    })
  }
  delTodo = (id) => {
    let list = this.state.list;
    this.setState({
      list: list.filter(el => el.id !== id)
    })
  }
  render() {

    return (
      <View>
        <View className="header">TodoList React</View>
        <CustomInput addTodo={this.addTodo}></CustomInput>
        <CustomList list={this.state.list} delTodo={this.delTodo}></CustomList>
      </View>
    )
  }
}

export default Todo;